<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的有声相册</title>
    <link rel="stylesheet" href="有声相册.css">
</head>



<body>

    <div id="top">
        <div id="font">
            我的有声相册
        </div>
    </div>

    <div class="code-display">
        <div class="code-display-button">
            关键代码
        <pre>
            .img{
                width:200px;
            }
            .main{
                width: 50%;
                margin: auto;
            }
        </pre>
        
        </div>
       
    </div>

    <ul id="menu">
        <li><a href="#girl">美女</a></li>
        <li><a href="#man">型男</a></li>
        <li><a href="#scientist">科学家</a></li>
        <li><a href="#capitalist">企业家</a></li>
    </ul>
    <div class="main">
        <div class="picture">
            <h2 id="girl">美女</h2>
            <a href="more.html"><img src="sources/img/美女.jpg" alt=""></a>

        </div>
        <hr>
        <div  class="picture">
            <h2 id="man">型男</h2>
            <a href="more.html"><img src="sources/img/型男.jpg" alt=""></a>
        </div>
        <hr>
        <div class="picture">
            <h2 id="scientist">科学家</h2>
            <a href="more.html"><img src="sources/img/科学家.jpg" alt=""></a>
        </div>
        <hr>
        <div class="picture">
            <h2 id="capitalist">企业家</h2>
            <a href="more.html"><img src="sources/img/企业家.jpg" alt=""></a>
        </div>
    
    </div>
    
    
</body>
</html>